<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟机监控</title>
    <link href="../layui/css/layui.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../image/kl_logo.png" rel="icon" type="image/png">
</head>
<body>
<div class="layui-tab" style="margin: 0;">
    <ul class="layui-tab-title">
        <li class="layui-this">网络</li>
        <li>磁盘</li>
        <li>Cpu使用率</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div id="network" style="width:600px;height:400px;"></div>
        </div>
        <div class="layui-tab-item">
            <div id="disk" style="width: 600px;height:400px;"></div>
        </div>
        <div class="layui-tab-item">
            <div id="cpu" style="width: 600px;height:400px;"></div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/jquery.min.js"></script>
<script src="../js/config_util.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/util.js"></script>
<script src="../js/echarts.common.min.js"></script>
<script src="../js/chat.js"></script>
<script src="../js/data_handler.js"></script>
<script language="JavaScript">
    function load_data(vmId) {
        const statics_data = new data_handler({uri: config_util.base_uri+`/management/vm/statistics?vmId=${vmId}`}).load_data();
        const network_data = {
            in: [],
            out: []
        };
        const disk_data = {
            in: [],
            out: []
        };
        const cpu_data = []
        $.each(statics_data, function (idx, row) {
            const time = dateFormat("YYYY-mm-dd HH:MM:SS", new Date(row.time));
            network_data.in.push([time, (row.receive / 1024).toFixed(2)])
            network_data.out.push([time, (row.send / 1024).toFixed(2)])
            disk_data.in.push([time, (row.read / 1024).toFixed(2)])
            disk_data.out.push([time, (row.write / 1024).toFixed(2)])
            cpu_data.push([time, row.cpu.toFixed(2)])
        })
        const disk = echarts.init(document.getElementById('disk'));
        const network = echarts.init(document.getElementById('network'));
        const cpu = echarts.init(document.getElementById('cpu'));
        disk.setOption(doubleChart(disk_data, "disk"));
        network.setOption(doubleChart(network_data, "network"));
        cpu.setOption(oneChart(cpu_data, "Cpu使用率"));
    }
    config_util.init(()=> {
        document.title = getUrlParam("name")
        const vmId = getUrlParam("id");
        load_data(vmId)
        setInterval(function () {
            load_data(vmId)
        }, 10000)
    })






</script>